<template>
  <PageListContainer>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="用户搜索" prop="keyword">
          <el-input v-model="state.params.keyword" placeholder="请输入手机号或用户ID" clearable />
        </el-form-item>
        <el-form-item label="平台" prop="wd">
          <el-select v-model="state.params.wd" placeholder="全部">
            <el-option v-for="item in platformOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="讲师筛选" prop="keyword">
          <el-select v-model="state.params.agent_id" filterable placeholder="全部">
            <el-option v-for="item in agentList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="1级渠道" prop="keyword">
          <el-input v-model="state.params.utm_source" placeholder="请输入1级渠道" clearable />
        </el-form-item>

        <el-form-item label="2级渠道" prop="keyword">
          <el-input v-model="state.params.utm_term" placeholder="请输入2级渠道" clearable />
        </el-form-item>
        <el-form-item label="注册时间" prop="keyword">
          <el-date-picker
            v-model="state.params._timeArr"
            value-format="YYYYMMDD"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
            :shortcuts="dateShortcut"
            @change="methods.onSearch"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="state.params.remark" placeholder="请输入备注" clearable />
        </el-form-item>
      </k-search>
    </div>

    <div class="base-block">
      <k-table v-bind="tableState" v-on="tableEvent">
        <template #nick_name="{ row }">
          <UserNickname show-role :data="row" />
        </template>
        <template #actions="{ row }">
          <div style="display: flex; justify-content: space-around;">
            <el-link type="primary" @click="handleOpenDrawer(row)">编辑</el-link>
            <el-dropdown @command="(command) => handleEmitCommand(command, row)">
              <el-link type="primary">更多</el-link>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="1">日志</el-dropdown-item>
                  <el-dropdown-item command="2">赠送兑换码</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </k-table>
    </div>

    <EditDrawer ref="drawerRef" @after-submit="handleAfterSubmit" />
    <ExchangeDrawer ref="exchangeDrawerRef" @after-submit="handleAfterSubmit" />
    <LogsModal ref="logModalRef" />
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

import UserNickname from '@/components/business/table-user-nickname/index.vue';
import { useTableList, platformOptions } from './hooks/use-table';
import { getLecturerList } from '@/api/crm-kgj/user';
import EditDrawer from './components/edit-drawer.vue';
import ExchangeDrawer from './components/exchange-drawer.vue';
import LogsModal from './components/logs-modal.vue';

import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';
import { AuthCode, hasPermission } from '@/modules/auth';
defineOptions({
  name: 'KgjUserList'
});

const { state, tableState, tableEvent, ...methods } = useTableList({});

const agentList = ref([{ id: -1, name: '全部' }]);
const drawerRef = ref();
const logModalRef = ref();
const exchangeDrawerRef = ref();

/** 关闭抽屉后的回调 */
const handleAfterSubmit = () => {
  methods.onSearch();
};
/** 打开抽屉 */
const handleOpenDrawer = (row) => {
  if (hasPermission(AuthCode.KGJ_USER_EDIT)) {
    drawerRef.value.show(1, row);
  }
};
/** 获取讲师列表 */
const handleGetLecList = async () => {
  const res = await getLecturerList();
  if (res.err) {
    return;
  }
  agentList.value = agentList.value.concat(res.data.data);
};
/** 触发更多事件 */
const handleEmitCommand = (command, row) => {
  const AucodeMap = {
    1: AuthCode.KGJ_USER_VIEW_LOGS,
    2: AuthCode.KGJ_USER_GIFT_CODE
  };
  if (hasPermission(AucodeMap[command])) {
    const CommandMap = {
      1: logModalRef.value?.show,
      2: exchangeDrawerRef.value?.show
    };
    CommandMap[command]?.(1, row);
  }
};
onMounted(() => {
  handleGetLecList();
});
</script>
